import { ref, computed, onMounted, onUnmounted } from 'vue';

//UI上到下顺序，依次编号ABCDE
export const headHeight = 60; //头部 A
export const titleHeight = 287; //标题 B
export const tabHeight = 39 + 32; //tab高度 + 下边距 C
export const bannerHeight = 471; //中部大块展示栏高度 D
export const bannerMarginTop = 20; //每个块叠起来的上边距 E

const arrH = [
  headHeight,
  titleHeight,
  tabHeight,
  bannerHeight,
  bannerMarginTop,
];

export const addPX = (num: number) => {
  return num + 'px';
};

//到第几个加起来的高度
export const toHeight = (N: number, isPx = true) => {
  let result: any = 0;
  for (let i = 0; i < N; i++) {
    result += arrH[i];
  }
  if (isPx) return addPX(result);
  else return result;
};

//反向加
export const reHeight = (N: number, isPx = true) => {
  let result: any = 0;
  for (let i = arrH.length - 1; i > arrH.length - 1 - N; i--) {
    if (i == arrH.length - 1) result += arrH[i] * 4;
    else {
      result += arrH[i];
    }
  }
  if (isPx) return addPX(result);
  else return result;
};

//A + B + C + E * N 的高度总和
export const toFoldHeight = (N: number, isPx = true) => {
  const result = headHeight + titleHeight + tabHeight + bannerMarginTop * N;
  if (isPx) return addPX(result);
  else return result;
};

//D + E * N，即1个卡片上叠了N层的高度 ( 共 N+1 张卡片 )
export const foldHeight = (N: number, isPx = true) => {
  const result = bannerHeight + bannerMarginTop * N;
  if (isPx) return addPX(result);
  else return result;
};

//E * N，即1个卡片上叠了N层的 露出来的边边 高度
export const foldSideHeight = (N: number, isPx = true) => {
  const result = bannerMarginTop * N;
  if (isPx) return addPX(result);
  else return result;
};

export const initUI = ({ selectedTab }: any) => {
  const headDom = document.querySelector('.website_head') as any;
  const titleDom = document.querySelector('.title_area') as any;
  const tabDom = document.querySelector('.tab_holder') as any;
  const bannerDom = document.querySelector('.banner_holder') as any;

  initHeader(headDom);
  initScrollEvent({ headDom, titleDom, tabDom, bannerDom, selectedTab });
};

const initHeader = (headDom: any) => {
  headDom.classList.add('t2s_head');
};

const initScrollEvent = ({
  headDom,
  titleDom,
  tabDom,
  bannerDom,
  selectedTab,
}: any) => {
  const childrenDom = bannerDom.children;
  const lastBarItem = bannerDom.children[4];

  window.onscroll = () => {
    // console.log(selectedTab.value, '滚滚滚', window.scrollY);
    const lastBarItemRect = lastBarItem.getBoundingClientRect();
    // console.log(lastBarItemRect);
    if (isSmallScreen()) {
      const index =
        (window.scrollY - (reHeight(5, false) - window.innerHeight)) /
        (bannerMarginTop * 4 + bannerHeight);
      scaleBefore(childrenDom, index);
      let tabIndex = Math.floor(index);
      tabIndex = Math.min(Math.max(tabIndex, 0), 4);
      selectedTab.value = tabIndex;
      // 滚到最后一个都要动上去了
      if (lastBarItemRect.bottom < window.innerHeight) {
        console.log('小屏到');
        moveBeforeDom({
          lastBarItemRect,
          childrenDom,
          headDom,
          titleDom,
          tabDom,
        });
      } else {
        umMoveBeforeDom({
          childrenDom,
          headDom,
          titleDom,
          tabDom,
        });
      }
    } else {
      const index = window.scrollY / (window.innerHeight - toHeight(3, false));
      scaleBefore(childrenDom, index);
      let tabIndex = Math.floor(index);
      tabIndex = Math.min(Math.max(tabIndex, 0), 4);
      selectedTab.value = tabIndex;
      // 滚到最后一个都要动上去了
      if (lastBarItemRect.bottom < reHeight(5, false)) {
        console.log('大屏到');
        moveBeforeDom({
          lastBarItemRect,
          childrenDom,
          headDom,
          titleDom,
          tabDom,
        });
      } else {
        umMoveBeforeDom({
          childrenDom,
          headDom,
          titleDom,
          tabDom,
        });
      }
    }
  };
};

const isSmallScreen = () => {
  return window.innerHeight < reHeight(5, false);
};

const moveBeforeDom = ({
  lastBarItemRect,
  childrenDom,
  headDom,
  titleDom,
  tabDom,
}: any) => {
  //移动每块板
  for (let i = 0; i < childrenDom.length - 1; i++) {
    childrenDom[i].style.top =
      lastBarItemRect.top -
      bannerMarginTop * (childrenDom.length - 1 - i) +
      'px';
  }
  //移动tab
  tabDom.style.top =
    lastBarItemRect.top - bannerMarginTop * 4 - tabHeight + 'px';
  //移动title
  titleDom.style.top =
    lastBarItemRect.top - bannerMarginTop * 4 - tabHeight - titleHeight + 'px';
  //移动head
  headDom.style.top =
    lastBarItemRect.top -
    bannerMarginTop * 4 -
    tabHeight -
    titleHeight -
    headHeight +
    'px';
};

const umMoveBeforeDom = ({ childrenDom, headDom, titleDom, tabDom }: any) => {
  //移动每块板
  for (let i = 0; i < childrenDom.length - 1; i++) {
    childrenDom[i].style.top = null;
  }
  //移动tab
  tabDom.style.top = null;
  //移动title
  titleDom.style.top = null;
  //移动head
  headDom.style.top = null;
};

export const scrollToBar = (index: any) => {
  let top: number;
  if (isSmallScreen()) {
    console.log('小');
    const firstHeight = reHeight(5, false) - window.innerHeight;
    top = firstHeight + (bannerMarginTop * 4 + bannerHeight) * index;
  } else {
    console.log('大');
    const firstHeight = 0;
    top = firstHeight + (window.innerHeight - toHeight(3, false)) * index;
  }
  window.scrollTo({
    top,
    behavior: 'smooth',
  });
};

const scaleBefore = (childrenDom: any, index: number) => {
  const scaleIndex = 0.05;
  if (index >= 0 && index <= 4)
    for (let i = 0; i < childrenDom.length - 1; i++) {
      if (index >= i)
        childrenDom[i].style.transform = `scale(${
          1 - scaleIndex * (index - i)
        })`;
    }
};
